<template>
	<div ref="cardDiv">
		<tool-bar title="myoql-crud生成器">
			<el-button type="primary" @click="btn_click()">确定</el-button>
			<el-button @click="btn_down('group')" v-if="query.group">下载 {{ query.group }} 组</el-button>
			<el-button @click="btn_down('entity')">下载 {{ query.entity }} 实体</el-button>
			<el-button @click="btn_down('all')">下载全部</el-button>
		</tool-bar>
		<div ref="queryDiv" class="query">
			<kv label="数据库">
				<selector :button-style="true" :data="['Mongo','Mysql','ElasticSearch']"
				          v-model="$data.query.dbType" chk="*"
				></selector>
			</kv>

			<kv label="组">
				<selector v-if="query.dbType" :url="$data.group_url"
				          v-model="$data.query.group" chk="*"
				></selector>
			</kv>
			<kv label="实体">
				<selector v-if="query.group" :url="$data.ent_url" v-model="$data.query.entity"
				          @loaded="ents_loaded" chk="*"></selector>
			</kv>
			<kv label="pkg">
				<el-input v-model="$data.query.pkg" chk="*"></el-input>
			</kv>
		</div>

		<el-tabs v-model="$data.type" type="card">
			<el-tab-pane v-for="(value,key) in results" :label="key" :name="key" :key="key">
				<div class="container">
          <el-button type="primary" style="position: absolute;right:18px;top:24px" @click="jv.saveFileWithPicker(value.name, value.id.split('/').getLast())">保存{{key}}</el-button>
					<div>{{ value.id }}</div>
					<textarea v-html="value.name" style="min-height: 300px"></textarea>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script type="text/ecmascript-6" setup>



//定义 vue2的this,当前组件
let $self = getCurrentInstance();

//定义 $attrs
let $attrs = useAttrs()


jv.defEnum("CrudTypeEnum", "mvc,list,card,ref,enum".split(","))

jv.chk_types.package = v => {
	return v.split(".").length >= 2;
}

const $data = reactive({
        type: "mvc",
        query: {
            pkg: "com.nancal",
            dbType: "",
            group: "",
            entity: "",
            server_path: "admin/kotlin/nancal/mvc",
            web_path: "admin/src/view"
        },
        group_url: "",
        ent_url: "",
        results: {}
    });

const query = $computed(()=> $data.query);
const results = $computed(()=> $data.results);

const queryDiv = ref();
const cardDiv = ref(null);

watch(()=>  $data.query.dbType ,val=>{
    if (val) {
        $data.group_url = '/dev/crud/groups?dbType=' + val;
    } else {
        $data.group_url = ""
    }

    $data.ent_url = ""
});

watch(()=>$data.query.group,val=>{
    if (val) {
        $data.ent_url = '/dev/crud/entities?group=' + val + '&dbType=' + $data.query.dbType;
    } else {
        $data.ent_url = ""
    }
},{immediate: true, deep: true})


watch(()=> $data.results,v=>{
    if (!v.list) return;

    // nextTick(() => {
    //     Array.from(cardDiv.value.querySelectorAll("textarea")).forEach(it =>
    //         it.wbs().forEach(it => {
    //             if (it.computedStyleMap().display != 'flex') {
    //                 it.classList.add("flex_column")
    //             }
    //         })
    //     );
    // })
},{deep: true, immediate: true})


onMounted(()=>{
    jv.$loadData("query", v=> $data.query = v )
})

const ents_loaded = function (res) {
    res.data.data.forEach(it => {
        if (it.id != it.name) {
            it.name = it.name + " (" + it.id + ")"
        }
    })
}

const btn_down = function (type) {
    if (queryDiv.value.chk({$data:$data}) == false) {
        return;
    }


    jv.downloadFile(window.SERVER_HOST + "/dev/crud/down?type=" + type + "&token=" + jv.token + "&" + jv.param($data.query))
}

const btn_click = function (op) {
    if (queryDiv.value.chk({$data:$data}) == false) {
        return;
    }

    jv.$saveData("query",$data.query)

    jv.$http.post("/dev/crud/gen", $data.query).then(res => {
        var json = res.data.data;

        $data.results = json;
    })
}

</script>

<style  lang="scss">
.flex_column {
	flex: 1;
	display: flex;
	flex-direction: column;
}
</style>
<style scoped lang="scss">
textarea {
	width: 100%;
	height: 80vh;
	font-family: Microsoft Yahei, Arail, Tabhoma;
	line-height: 1.8;
}
</style>
